<template>
  <section class="EmployeeCard__container">
    <div class="__body">
      <h1>
        <span class="name" @click="click">{{ item.name }}</span>
        <gender-icon :value="+item.gender" />
        <el-tag type="success" effect="plain">
          {{ item.position ? item.position : "职位暂无" }}
        </el-tag>
      </h1>
      <p>{{ item.phone ? item.phone : "无" }}</p>
      <p></p>
    </div>
    <div v-if="!noAction" class="__footer">
      <slot :item="item"></slot>
    </div>
  </section>
</template>

<script>
import GenderIcon from "@/views/Common/GenderIcon";
export default {
  components: {
    GenderIcon,
  },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    noAction: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    click() {
      const { href } = this.$router.resolve({
        path: "/employeesdetail",
        query: {
          id: this.item.id,
        },
      });
      window.open(href, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.EmployeeCard__container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 240px;
  box-sizing: border-box;
  box-shadow: 0 0 12px #ebebeb;
  border-radius: 5px;
  overflow: hidden;
  transition: 0.5s;

  .__body {
    display: flex;
    flex-direction: column;

    padding: 10px;
    line-height: 1.6;

    h1 {
      font-size: 2.2rem;
      font-weight: bold;
      display: flex;
      height: 35px;
      .name {
        margin-right: 10px;
        &:hover {
          color: #409eff;
          cursor: pointer;
        }
      }

      .el-tag {
        margin-left: auto;
        border: none;
      }
    }

    p {
      color: #666;
      line-height: 1.7;

      span {
        font-size: 1.2rem;
        // border: 1px solid #409eff;
        border-radius: 5px;
        margin: 0 5px 0 0;
        padding: 0 5px;
        // color: #409eff;
        background: #ebebeb;
      }
    }
  }

  .__footer {
    // display: none;
    // display: block;
    height: 30px;
    // transition: 1s;
    background: #fcfcfc;
  }

  &:hover {
    // > .__footer {
    //   // display: flex;
    //   height: 30px;
    //   background: #f4f4f4;
    // }
  }

  .stamp {
    position: absolute;
    right: 5%;
    top: -5%;
  }
}
</style>
